window.onload = function() {
    var $box = $('#listBox');
    var dataArr = [];
    
    var _arr = [{
            name: '1',
            num: 333
        }, {
            name: '2',
            num: 111
        }, {
            name: '3',
            num: 222
        }, {
            name: '4',
            num: 444
        }, {
            name: '5',
            num: 333
        }, {
            name: '6',
            num: 111
        }, {
            name: '7',
            num: 222
        }, {
            name: '8',
            num: 444
        }, {
            name: '7',
            num: 222
        }, {
            name: '8',
            num: 444
        }];
    var showArr = [];
    // 定时更新展示内容
    function update(arr, data) {
        var time = setInterval(function() {
            var AA = arr.slice(0, 4);
            arr = arr.slice(4);
            changeList(AA);
            // if (!AA.length){
            //     clearInterval(time);
            //     return;
            // }
        }, data)
    };
    update(_arr, 2000)
    // 重置展示内容
    function changeList(arr) {
        var str = '';
        for (var i = 0; i < arr.length; i++) {
            str += '<div class="list">' + arr[i].name + ':' + arr[i].num +'</div>'
        }; 
        $box.html(str);
    };
    changeList(_arr.slice(0, 4));
    // 获取数据
    function getData() {
        const socket = new WebSocket('ws://221.228.196.111:8080/sub');

        socket.addEventListener('open', function (event) {
            socket.send('j@97376');
        });

        socket.onmessage = function (event) {
            var data = JSON.parse(event.data);
            if(data.type == 2){
                dataArr.push(data.data);
            }
            console.log(data.type, data.data);
        }
    }
    
}